<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>车辆违章查询</title>
    <link rel="stylesheet" href="/static/css/style.css">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.7.0/echarts.min.js"></script>
</head>
<body>
    <form id="form" action="/carapp/search/" method="POST">
        {% csrf_token %}
{#        <input type="hidden" name="currentPage" value="1">#}
{#        <input type="hidden" name="pageSize" value="5">#}
        <input type="text" name="carno" value="{{ carno }}" placeholder="请输入车牌号或车主姓名">
        <input type="submit" value="查询">
    </form>
    <hr>
{#    {% if page_obj.object_list %}#}
    <div class="data">
        {% if object_list %}


        <table>
            <tr>
                <th>车牌</th>
                <th>车主</th>
                <th>时间</th>
                <th>违章原因</th>
                <th>处罚方式</th>
                <th>是否受理</th>
                <th>操作</th>
            </tr>

                {% for i in object_list %}

            <tr>
                <td>{{ i.car.carno }}</td>
                <td>{{ i.car.owner }}</td>
                <td>{{ i.makedate }}</td>
                <td>{{ i.reason }}</td>
                <td>{{ i.punish }}</td>
                <td>{{ i.dealt | yesno:'已受理,未受理' }}</td>
                <td class="handler">
                    {% if not i.dealed %}
                    <a class="handle" href="/carapp/handle/?rno={{ i.id }}">受理</a>
                    <a class="delete" href="/carapp/delete/?rno={{ i.id }}">删除</a>
                    {% endif %}
                </td>
            </tr>
            {% endfor %}
            {% else %}
            <h1>大哥，没有该车辆信息</h1>
         {% endif %}

        </table>
         <div class="paginator">
            <button >首页</button> &nbsp;
            <button data ="/carapp/search/?page={{  prev_page }}" {% if not has_prev %}disabled{% endif %}>上一页</button>&nbsp;&nbsp;
            第{{ current_page }}页 / 共{{ total_page }}页&nbsp;&nbsp;
            <button data = "/carapp/search/?page={{ next_page }}" {% if not has_next %}disabled{% endif %}>下一页</button>
            <button data= "/carapp/search/?page={{ total_page }}">尾页</button>
         </div>
    </div>
    <a id="export" href="/carapp/export/">导出excel</a>
    <hr>
    <div id="main" style="width: 600px;height:400px;"></div>

 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

    <script>
        function LocationDate(evt){
             $('#form').attr(
                    'action', $(evt.target).attr('data')
                    ).trigger('submit')
        }



        $(() =>{

            $('#export').on('click', (evt) => {
                evt.preventDefault()
                let url = $(evt.target).attr('href')
                let queryParam = '?carno=' + $('input[name="carno"]').val()
                location.href = url + queryParam
            });

           $('.paginator>button').on('click',LocationDate);
           $('.handle').on('click',(evt)=>{
               evt.preventDefault()
               let url = $(evt.target).attr('href')
               $.getJSON(url,(json) =>{
                   if (json.code == 10000){
                    $(evt.target).parent().prev().text('已受理')
                   }
               })


           });

           $('.delete').on('click',(evt)=> {
               evt.preventDefault()
               if (confirm('确定删除该记录吗？')) {
                   let url = $(evt.target).attr('href')
                   $.getJSON(url, (json) => {
                       if (json.code === 10000) {
                           $(evt.target).parent().parent().remove()
                       } else {
                           alert('尚未办理违章信息，不能删除')
                       }

                   })
               }

           })
        })
    </script>
    <script type="text/javascript">

      $(function () {
            $.getJSON('/carapp/data',(json) =>{

                let data = json.data
                console.log(data)
                let data_year =[]
                let data_count = []
                for(i of data){
                    data_year.push(i['year'])
                    data_count.push(i['count'])
                    console.log(data_year)
                    console.log(data_count)
                }




        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '每年处罚总数'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: data_year
            },
            yAxis: {},
            series: [{
                name: '处罚次数',
                type: 'bar',
                data:data_count
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

        })
      })
    </script>



</body>
</html>